<!DOCTYPE html>
<html>
  <head>
    <title>html2pdf Test - Pagebreaks</title>
    <link rel="stylesheet" href="baseline.css">

    <style type="text/css">
      /* Avoid unexpected sizing on all elements. */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      /* CSS styling for before/after/avoid. */
      .before {
        page-break-before: always;
      }
      .after {
        page-break-after: always;
      }
      .avoid {
        page-break-inside: avoid;
      }

      /* Big and bigger elements. */
      .big {
        height: 10.9in;
        background-color: yellow;
        border: 1px solid black;
      }
      .fullpage {
        height: 11in;
        background-color: fuchsia;
        border: 1px solid black;
      }
      .bigger {
        height: 11.1in;
        background-color: aqua;
        border: 1px solid black;
      }

      /* Table styling */
      table {
        border-collapse: collapse;
      }
      td {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <p>First line</p>
    <p class="before">Break before</p>
    <p class="after">Break after</p>
    <p>No effect (should be top of 3rd page, using css or specify).</p>
    <p class="html2pdf__page-break">Legacy (should create a break after).</p>
    <p>No effect (should be top of 2nd page, using legacy).</p>
    <p class="avoid big">Big element (should start on new page, using avoid-all/css/specify).</p>
    <p>No effect (should start on next page *only* using avoid-all).</p>
    <p>No effect (for spacing).</p>
    <p class="avoid fullpage">Full-page element (should start on new page using avoid-all/css/specify).</p>
    <p>No effect (for spacing).</p>
    <p class="avoid bigger">Even bigger element (should continue normally, because it's more than a page).</p>

    <!-- Advanced avoid-all tests. -->
    <div>
      <p>No effect inside parent div (testing avoid-all - no break yet because parent is more than a page).</p>
      <p class="big">Big element inside parent div (testing avoid-all - should have break before this).</p>
    </div>
    <table>
      <tr>
        <td>Cell 1-1 - start of new page (avoid-all only)</td>
        <td>Cell 1-2 - start of new page (avoid-all only)</td>
      </tr>
      <tr class="big">
        <td>Cell 2-1 - start of another new page (avoid-all only)</td>
        <td>Cell 2-2 - start of another new page (avoid-all only)</td>
      </tr>
    </table>
  </body>
</html>
